<!DOCTYPE HTML>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
// Ensure that extending a selection inside a contenteditable skips past an
// uneditable region.

// Extend before uneditable
selection_test(
  [
    '<div contenteditable>',
      '<p>^Before|</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>After</p>',
    '</div>'
  ],
  selection => selection.modify('extend', 'forward', 'character'),
  [
    '<div contenteditable>',
      '<p>^Before</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>|After</p>',
    '</div>'
  ],
  'Extend by character before uneditable');

selection_test(
  [
    '<div contenteditable>',
      '<p>^Before|</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>After</p>',
    '</div>'
  ],
  selection => selection.modify('extend', 'forward', 'word'),
  [
    '<div contenteditable>',
      '<p>^Before</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>|After</p>',
    '</div>'
  ],
  'Extend by word before uneditable');

selection_test(
  [
    '<div contenteditable>',
      '<p>^Before|</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>After</p>',
    '</div>'
  ],
  selection => selection.modify('extend', 'forward', 'line'),
  [
    '<div contenteditable>',
      '<p>^Before</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>After|</p>',
    '</div>'
  ],
  'Extend by line before uneditable');

// Extend after uneditable
selection_test(
  [
    '<div contenteditable>',
      '<p>Before</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>|After^</p>',
    '</div>'
  ],
  selection => selection.modify('extend', 'backward', 'character'),
  [
    '<div contenteditable>',
      '<p>Before|</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>After^</p>',
    '</div>'
  ],
  'Extend by character after uneditable');

selection_test(
  [
    '<div contenteditable>',
      '<p>Before</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>|After^</p>',
    '</div>'
  ],
  selection => selection.modify('extend', 'backward', 'word'),
  [
    '<div contenteditable>',
      '<p>Before|</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>After^</p>',
    '</div>'
  ],
  'Extend by word after uneditable');

selection_test(
  [
    '<div contenteditable>',
      '<p>Before</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>|After^</p>',
    '</div>'
  ],
  selection => selection.modify('extend', 'backward', 'line'),
  [
    '<div contenteditable>',
      '<p>|Before</p>',
      '<p contenteditable="false">Middle</p>',
      '<p>After^</p>',
    '</div>'
  ],
  'Extend by line after uneditable');
</script>
